<!DOCTYPE html>
<html lang="zh-CN" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link th:href="@{/assets/plugins/jquery-ztree/3.5.24/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" th:src="@{/assets/plugins/jquery-ztree/3.5.24/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/assets/plugins/jquery-ztree/3.5.24/js/jquery.ztree.excheck.js}"></script>
    <script type="text/javascript">

        var remoteUrl = '[[@{/sys/role/checkName(oldName=${role.name})}]]';

        $(document).ready(function () {
            $("#name").focus();

            var validateMessageBox = $('#validateMessageBox');
            $("#roleEditForm").validate({
                errorElement: 'label',
                errorClass: 'help-block',
                focusInvalid: true,
                rules: {
                    name: {remote: remoteUrl}
                },
                messages: {
                    name: {remote: "角色名已存在"}
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                },
                success: function (label, element) {
                    label.closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    App.blockUI(window, true);
                    form.submit();
                },
                errorContainer: validateMessageBox,
                errorPlacement: function (error, element) {
                    this.errorContainer.addClass('note-danger').html("<p>输入有误，请先更正。</p>").show();
                    var formGroup = $(element).closest('.form-group');
                    var errorElement = formGroup.children('span.' + this.errorClass);
                    if (!errorElement || errorElement.length == 0) {
                        errorElement = $('<span/>').addClass(this.errorClass);
                        errorElement.appendTo(formGroup);
                    }
                    error.appendTo(errorElement);
                }
            });


        });

    </script>
</head>
<body>
<div layout:fragment="content" th:remove="tag">
    <div th:replace="fragments/tool :: tipMessage (type='',content=${message})" th:remove="tag"></div>
    <div id="selectusertorole_tree_div" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-wide">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">分配角色</h4>
                </div>
                <div class="modal-body modal-overflow" style="height: 300px;">
                    <div id="assignRole" class="row">
                        <div class="col-md-4">
                            <div class="dialog-block alert alert-block alert-info fade in">
                                <p>所在部门：</p>

                                <div id="officeTree" class="ztree ztree-height"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="dialog-block alert alert-block alert-info fade in">
                                <p>待选人员：</p>
                                <div id="userTree" class="ztree ztree-height"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="dialog-block alert alert-block alert-info fade in">
                                <p>已选人员：</p>

                                <div id="selectedTree" class="ztree ztree-height"></div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" name="cancel" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn green" name="clear">清空</button>
                    <button type="button" class="btn blue" name="enter">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title">
                角色管理
                <small>维护系统角色，对系统中角色进行增加、删除、修改、分配</small>
            </h3>
            <ul class="page-breadcrumb breadcrumb">
<!--                 <li class="btn-group"> -->
<!--                     <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" -->
<!--                             data-delay="1000" data-close-others="true"> -->
<!--                         <span>跳转</span> <i class="fa fa-angle-down"></i> -->
<!--                     </button> -->
<!--                     <ul class="dropdown-menu pull-right" role="menu"> -->
<!--                         <li><a th:href="@{/sys/role}">角色列表</a></li> -->
<!--                         <li><a th:href="@{/sys/role/form}">角色添加</a></li> -->
<!--                     </ul> -->
<!--                 </li> -->
                <li>
                    <i class="fa fa-home"></i>
                    <a th:href="@{/}">首页</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">系统设置</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li><a href="#">角色管理</a></li>
            </ul>
            <!-- END PAGE TITLE & BREADCRUMB-->

        </div>
    </div>


    <div class="row profile">
        <div class="col-md-12">
            <!--BEGIN TABS-->
            <div class="tabbable tabbable-custom tabbable-full-width">
                <ul class="nav nav-tabs">
                    <li><a th:href="@{/sys/role}">角色列表</a></li>
                    <li class="active">
                        <a href="#role_tab_1_2">
                            角色分配
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="role_tab_1_2">

                        <div class="container-fluid note note-success">
                            <div class="row-fluid span12">
                                <span class="span4">角色名称: <b>[[${role.name}]]</b></span>
                                <span class="span4">归属机构:[[ ${role.office.name}]]</span>
                                <span class="span4">英文名称: [[${role.enname}]]</span>
                            </div>
                            <div class="row-fluid span8">
                                <span class="span4">数据范围: [[${@userMenus.getDictLabel(role.dataScope, 'sys_data_scope', '')}]]</span>
                            </div>
                        </div>

                        <div class="portlet box blue">
                            <div class="portlet-title">
                                <div class="caption"><i class="fa fa-reorder"></i>
                                    人员列表
                                </div>
                                <div class="actions">
                                    <form id="assignRoleForm" action="" method="post" class="hide"></form>
                                    <a id="assignButton" href="javascript:void(0);" class="btn blue"><i
                                            class="fa fa-plus"></i> 分配角色</a>
                                    <script>

                                        function htmlDecode(value){
                                            return $('<div/>').html(value).text();
                                        }

                                        $("#assignButton").on('click', function (event) {

                                            var $modal = $('#selectusertorole_tree_div');
                                            <!-- start initialize tree -->
                                            var setting = {
                                                view: {selectedMulti: false, nameIsHTML: true, showTitle: false},
                                                data: {simpleData: {enable: true}},
                                                callback: {onClick: treeOnClick}
                                            };


                                            var officeNodesJson = "[[${officeListJson}]]",
                                                    officeNodes = $.parseJSON(htmlDecode(officeNodesJson));

                                            var pre_selectedNodesJson = "[[${userListJson}]]",
                                                    pre_selectedNodes = $.parseJSON(htmlDecode(pre_selectedNodesJson));

                                            var selectedNodes = pre_selectedNodes;

                                            var pre_ids = "[[${selectIds}]]".split(",");
                                            var ids = "[[${selectIds}]]".split(",");

                                            //点击选择项回调
                                            function treeOnClick(event, treeId, treeNode, clickFlag) {
                                                if ("officeTree" == treeId) {
                                                    $.get("[[@{/sys/role/users/?officeId=}]]" + treeNode.id, function (userNodes) {
                                                        $.fn.zTree.init($("#userTree"), setting, userNodes);
                                                    });
                                                }
                                                if ("userTree" == treeId) {
                                                    if ($.inArray(String(treeNode.id), ids) < 0) {
                                                        selectedTree.addNodes(null, treeNode);
                                                        ids.push(String(treeNode.id));
                                                    }
                                                }
                                                if ("selectedTree" == treeId) {
                                                    if ($.inArray(String(treeNode.id), pre_ids) < 0) {
                                                        selectedTree.removeNode(treeNode);
                                                        ids.splice($.inArray(String(treeNode.id), ids), 1);
                                                    } else {
                                                        toastr['info']("角色原有成员不能清除！", "信息提示");
                                                    }
                                                }
                                            }

                                            function clearAssign() {
                                                var tips = '';
                                                var submit = function (v, h, f) {
                                                    if (v == 'ok') {
                                                        var tips = "";
                                                        if (pre_ids.sort().toString() == ids.sort().toString()) {
                                                            tips = "未给角色【${role.name}】分配新成员！";
                                                        } else {
                                                            tips = "已选人员清除成功！";
                                                        }
                                                        ids = pre_ids.slice(0);
                                                        selectedNodes = pre_selectedNodes;
                                                        $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);
                                                        toastr['info'](tips, "信息提示");
                                                    } else if (v == 'cancel') {
                                                        // 取消
                                                        toastr['info']("取消清除操作！", "信息提示");
                                                    }
                                                    return true;
                                                };
                                                tips = "确定清除角色【[[${role.name}]]】下的已选人员？";
                                                bootbox.confirm(tips, submit);
                                            }

                                            var officeTree = $.fn.zTree.init($("#officeTree"), setting, officeNodes);
                                            var selectedTree = $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);

                                            <!-- end initialize tree -->

                                            var _buttonOk = $('button[name="enter"]', $modal), _buttonCancel = $('button[name="cancel"]', $modal),
                                                    _buttonClear = $('button[name="clear"]', $modal);
                                            var returnVal = function () {
                                                // 删除''的元素
                                                if (ids[0] == '') {
                                                    ids.shift();
                                                    pre_ids.shift();
                                                }
                                                if (pre_ids.sort().toString() == ids.sort().toString()) {
                                                    toastr['info']("未给角色【[[${role.name}]]】分配新成员！", "信息提示");
                                                    return false;
                                                }
                                                // 执行保存
                                                App.blockUI('body');
                                                var idsArr = "";
                                                for (var i = 0; i < ids.length; i++) {
                                                    idsArr = (idsArr + ids[i]) + (((i + 1) == ids.length) ? '' : ',');
                                                }
                                                $('#assignRoleForm').attr('action', '[[@{/sys/role/assignrole/?id=${role.id}&idsArr=}]]' + idsArr).submit();
                                                return true;
                                            }
                                            _buttonOk.on('click', function (event) {
                                                returnVal();
                                                _buttonCancel.trigger("click");
                                            });

                                            _buttonClear.on('click', function (event) {
                                                clearAssign();
                                                _buttonCancel.trigger("click");
                                            });

                                            $modal.modal();

                                        });
                                    </script>
                                </div>
                            </div>

                            <div class="portlet-body">
                                <table id="contentTable" class="table table-striped table-bordered table-advance table-hover">
                                    <thead>
                                    <tr>
                                        <th>归属公司</th>
                                        <th>归属部门</th>
                                        <th>登录名</th>
                                        <th>姓名</th>
                                        <th>电话</th>
                                        <th>手机</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="user : ${users}">
                                        <td th:text="${user.company.name}">name</td>
                                        <td th:text="${user.office.name}">name</td>
                                        <td th:text="${user.loginName}">name</td>
                                        <td th:text="${user.name}">name</td>
                                        <td th:text="${user.phone}">name</td>
                                        <td th:text="${user.mobile}">name</td>
                                        <td>
                                            <a class="btn default btn-xs red-stripe"
                                               th:href="@{/sys/role/outrole(userId=${user.id},roleId=${role.id})}"
                                               onclick="return App.confirm('确认要将用户<b>[[${user.name}]]</b>从<b>[[${role.name}]]</b>角色中移除吗？', this.href)">移除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


</div>


</body>
</html>
